<template>
	<BaseContainer>
		<aplid-base-crud
			ref="crud"
			class="w-100"
			v-bind="baseConfig"
			:paramsObj="{
				year: nowRowData.year,
				month: nowRowData.month,
				creditCode: queryObj.creditCode,
			}"
		>
			<template v-slot:header-item>
				<ul>
					<li class="text-title">
						<p class="text-value">
							{{ nowRowData.month }}月 员工人数 <span class="text-value"> {{ totalNum.staffNum }}</span
							>人
						</p>
					</li>
					<li class="text-label">
						<p>
							较上月比 新入职
							<span class="text-value">{{ totalNum.entryNum }}</span>
						</p>
						<p>
							人 离职 <span class="text-value">{{ totalNum.dimissionNum }}</span
							>人
						</p>
					</li>
				</ul>
			</template>
      <template v-slot:viewStatus="{row}">
        <el-button size="small" type="success" v-if="row.viewStatus == 1">已查看</el-button>
        <el-button size="small" type="info" v-else @click="viewStatus(row)">未查看</el-button>
      </template>
      <template v-slot:ArchivesDialog="{ row, show }">
        <Archives @refresh="handleRefresh" :api="baseConfig.api" v-if="show" :nowRowData="row">
        </Archives>
      </template>
		</aplid-base-crud>
	</BaseContainer>
</template>

<script setup lang="ts">
import { baseConfig } from './config'
import { useCommonStore } from '@/stores/common'
import apiMod from '@/apiMod/index'
import Archives from './Archives/index.vue'
const { queryObj } = storeToRefs(useCommonStore())

type Props = {
	nowRowData?: any
}
const props = withDefaults(defineProps<Props>(), {})
const crud = ref(null)
const totalNum = ref({
	dimissionNum: 0,
	entryNum: 0,
	staffNum: 0,
})
const getInitData = () => {
	apiMod
		.view_dpFoundationPractitioners_month({
			year: props.nowRowData.year,
			month: props.nowRowData.month,
			creditCode: queryObj.value.creditCode,
		})
		.then((res) => {
			const data = res.data || {}
			totalNum.value = data
		})
}

const handleRefresh = (query?: any, visible = false) => {
  nextTick(() => {
    crud.value?.refreshChange(query)
  })
}


const viewStatus = (row)=> {
  apiMod.view_dpFoundationPractitioners_edit({
    id:row.id,
    viewStatus:1,
  }).then((res) => {
    handleRefresh()
  })
}
onMounted(() => {
	getInitData()
})
</script>

<style lang="scss" scoped>
.text-title {
	font-weight: 600;
	font-size: 18px;
}
.text-label {
	display: flex;
	align-items: center;
}
.text-value {
	font-weight: 600;
	font-size: 24px;
}
</style>
